<template>
	<view class="explode-container">
		<view class="top-banner">
			<image src="/static/redpacket-bg.png" mode="widthFix" class="bg-image"></image>
			<view class="content">
				<text class="title">每日领红包</text>
				<text class="subtitle">每天可领一次红包</text>

				<view class="packet-wrapper" @click="handleExplode">
					<image src="/static/redpacket.png" mode="aspectFit" class="packet-image"
						:class="{ 'shake-animation': canExplode && !exploding }"></image>
					<text class="packet-text" v-if="canExplode && !exploding">点我爆红包</text>
					<text class="packet-text" v-else-if="exploding">正在爆红包...</text>
					<text class="packet-text" v-else>今日已领取</text>
				</view>
			</view>
		</view>

		<view class="history-title" v-if="historyList.length > 0">
			<text>今日红包记录</text>
		</view>

		<scroll-view scroll-y class="history-list" v-if="historyList.length > 0">
			<view class="history-item" v-for="item in historyList" :key="item.id">
				<view class="left">
					<text class="amount">¥{{ item.amount }}</text>
					<text class="condition">满{{ item.condition }}元可用</text>
				</view>
				<view class="right">
					<text class="time">{{ formatTime(item.createTime) }}</text>
					<view class="tag" :class="{ 'used': item.status === 2 }">
						{{ item.status === 1 ? '可使用' : '已使用' }}
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="tips" v-if="historyList.length === 0">
			<text>今天还没有领取红包哦~</text>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post
	} from '@/utils/request'
	/* import dayjs from 'dayjs' */

	export default {
		data() {
			return {
				canExplode: true,
				exploding: false,
				historyList: [],
				todayPacket: null
			}
		},
		mounted() {
			this.checkTodayPacket()
			this.loadHistory()
		},
		methods: {
			async checkTodayPacket() {
				try {
					const res = await get('/redpacket/checkToday')
					this.canExplode = !res.data.hasReceived
					this.todayPacket = res.data.packet || null

					if (this.todayPacket) {
						this.historyList.unshift(this.todayPacket)
					}
				} catch (e) {
					console.error(e)
				}
			},

			async loadHistory() {
				try {
					const res = await get('/redpacket/todayHistory')
					this.historyList = res.data
				} catch (e) {
					console.error(e)
				}
			},

			async handleExplode() {
				if (!this.canExplode || this.exploding) return

				this.exploding = true

				try {
					const res = await post('/redpacket/explode')

					uni.showToast({
						title: `恭喜获得${res.data.amount}元红包!`,
						icon: 'none',
						duration: 2000
					})

					this.canExplode = false
					this.todayPacket = res.data
					this.historyList.unshift(res.data)
				} catch (e) {
					uni.showToast({
						title: e.message || '爆红包失败',
						icon: 'none'
					})
				} finally {
					this.exploding = false
				}
			},

			formatTime(time) {
				return dayjs(time).format('HH:mm:ss')
			}
		}
	}
</script>

<style scoped>
	.explode-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.top-banner {
		position: relative;
		height: 500rpx;
		overflow: hidden;
	}

	.bg-image {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.content {
		position: relative;
		z-index: 1;
		padding: 40rpx;
		color: #fff;
	}

	.title {
		font-size: 42rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 28rpx;
		opacity: 0.9;
		display: block;
		margin-bottom: 40rpx;
	}

	.packet-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
	}

	.packet-image {
		width: 200rpx;
		height: 240rpx;
		margin-bottom: 20rpx;
	}

	.packet-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}

	.history-title {
		padding: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.history-list {
		max-height: calc(100vh - 600rpx);
		background-color: #fff;
	}

	.history-item {
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.history-item .left {
		flex: 1;
	}

	.history-item .amount {
		font-size: 36rpx;
		color: #ff4e4e;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.history-item .condition {
		font-size: 26rpx;
		color: #999;
	}

	.history-item .right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.history-item .time {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.history-item .tag {
		background-color: #ff4e4e;
		color: #fff;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.history-item .tag.used {
		background-color: #ccc;
	}

	.tips {
		text-align: center;
		padding: 40rpx;
		font-size: 28rpx;
		color: #999;
	}

	@keyframes shake {
		0% {
			transform: rotate(0deg);
		}

		25% {
			transform: rotate(5deg);
		}

		50% {
			transform: rotate(0deg);
		}

		75% {
			transform: rotate(-5deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}

	.shake-animation {
		animation: shake 0.5s infinite;
	}
</style>